<template>
  <card-slot class="center service">
    <template #title>
      <div class="w-[150px]">🎯 Service</div>
    </template>

    <template #page>
      <div>03</div>
    </template>

    <n-grid cols="0 400:1 600:3">
      <n-grid-item class="service-item">
        <div
          class="h-[220px] bg-cover dynamic-background"
          :style="{ backgroundImage: `url(${leftItem.src})` }"
          @mouseover="showOverlay('left')"
          @mouseleave="hideOverlay('left')"
        >
          <div class="overlay" :class="{ show: overlays.left }">
            <div class="font-[700] text-[24px]">APP/小程序开发</div>
            <div>
              高质量、高水平、快速地开发各平台的小程序,可进行开发 iOS 和 Android
              等跨端APP应用程序.
            </div>
          </div>
        </div>
      </n-grid-item>

      <n-grid-item class="service-item">
        <div
          class="h-[220px] bg-cover dynamic-background center"
          :style="{ backgroundImage: `url(${centerItem.src})` }"
        >
          <div class="overlay center-overlay">
            <div class="font-[700] text-[24px]">WEB 网页应用开发</div>
            <div>
              结合前沿技术和创新思维、高质量和专业水平打造的最现代、最优质的Web网页应用。
            </div>
          </div>
        </div>
      </n-grid-item>

      <n-grid-item class="service-item">
        <div
          class="h-[220px] bg-cover dynamic-background"
          :style="{ backgroundImage: `url(${rightItem.src})` }"
          @mouseover="showOverlay('right')"
          @mouseleave="hideOverlay('right')"
        >
          <div class="overlay" :class="{ show: overlays.right }">
            <div class="font-[700] text-[24px]">PHP</div>
            <div>
              快速搭建WEB服务接口，为前端应用提供后端支持.帮助解决各种PHP相关问题。
            </div>
          </div>
        </div>
      </n-grid-item>
    </n-grid>
  </card-slot>
  
</template>

<script setup lang="ts">
const leftItem = ref({ src: getImageAbsolutePath("app.png") });

const centerItem = ref({ src: getImageAbsolutePath("web.png") });

const rightItem = ref({ src: getImageAbsolutePath("php-bg.png") });

const overlays = ref<any>({
  left: false,
  right: false,
});

const showOverlay = (position: any) => {
  overlays.value[position] = true;
};

const hideOverlay = (position: any) => {
  overlays.value[position] = false;
};
</script>

<style scoped lang="less">
.service {
  margin-top: 30px;

  .service-item {
    margin-right: 20px;
    margin-bottom: 20px;

    .dynamic-background {
      position: relative;
      background-size: cover;
      background-position: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .dynamic-background:hover {
      transform: scale(1.05);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      opacity: 0;
      transition: opacity 0.3s ease;
      padding: 30px;
      box-sizing: border-box;
      text-align: center;
    }

    .overlay.show {
      opacity: 1;
    }

    .center-overlay {
      opacity: 1; /* 中间的遮罩始终显示 */
    }
  }
}
</style>
